<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>图片剪裁上传demo</title>
    <link rel="stylesheet" type="text/css" href="css/cropper.min.css" />
    <link rel="stylesheet" type="text/css" href="css/cropper.min.css" />
    <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/cropper.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="layer/layer.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css">
    body {
        text-align: center;
    }

    .check-btn {
        border: 1px solid;
        padding: 10px 20px;
        border-radius: 5px;
        background: #a3cf62;
        color: #fff;
    }

    .canvas {
        width: 150px;
        height: 150px;
    }

    .canvas>canvas {
        width: 100%;
    }

    #newMiva {
        width: 100%;
        height: 700px;
    }

    .layui-layer-content {
        display: flex;
        justify-content: space-between;
    }

    .yulan {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin: 0 50px;
    }

    .yulan>div {
        width: 165px
    }

    .yulan>div>img {
        border-radius: 50%;
        width: 100%
    }

    .yulan>div:nth-child(1) {
        padding: 30px;
    }

    .yulan>div:nth-child(2) {
        padding: 15px;
    }

    .yulan>div:nth-child(3) {
        padding: 0px;
    }
    </style>
</head>

<body>
    <input id="file" type="file" style="display: none;" />
    <h2 class="">预览图片: </h2>
    <img data-item="img" src="" width="200" height="200" />
    <!--剪裁后的图片容器-->
    <div id="" class="canvas"></div>
    <label for="file" data-item="upbtn" class="check-btn">选择图片</label>
    <script type="text/javascript">
    $(function() {
        var files = $('#file')
        var reader = new FileReader();
        var fileBuffer;
        var zoomNum = 1;
        var base64url;
        var imgbox;
        var alertHTML = '<div style="width:70%;height:100%"><img id="newMiva" src=""/></div>';
        alertHTML += '<div class="yulan"><div><img alt="小" src="//placehold.it/200x200" alt="" /></div><div><img alt="中" src="//placehold.it/200x200" alt="" /></div><div><img alt="大" src="//placehold.it/200x200" alt="" /></div></div>'
        // 图片预览
        files.on('change', function() {
            reader.readAsDataURL(files.prop('files')[0]);
            reader.onload = function(e) {
                // 获取file里的内容
                fileBuffer = e.target.result;
                layui.use('layer', function() {
                    layer.open({
                        type: 1,
                        title: false,
                        content: alertHTML,
                        scrollbar: false,
                        resize: false,
                        zIndex: 7489436491,
                        btn: ['确认', '放大', '缩小', '预览'],
                        area: ['1000px', '600px'],
                        success: function(layero, index) {
                            imgbox = layero.find("#newMiva");
                            imgbox.attr('src', fileBuffer);
                            imgbox.cropper({
                                aspectRatio: 1 / 1,
                                dragMode: 'move', // 设置为  ‘move’: 只可以移动模式
                                dragCrop: false, // 设置为禁止移除当前的剪裁框，并通过拖动来新建一个剪裁框区域。
                                toggleDragModeOnDblclick: false, // 禁止双击切换模式
                                background: false,
                                // movable: false,
                            });
                        },
                        yes: function(index, layero) {
                            var imgbox = layero.find("#newMiva");
                            var cas = imgbox.cropper('getCroppedCanvas');
                            base64url = cas.toDataURL('image/jpeg');
                            var option = base64url; //上传图片的内容
                            $('#user-pic-img').attr('src', option);
                            layer.closeAll();
                        },
                        btn2: function(index, layero) {
                            var imgbox = layero.find("#newMiva");
                            zoomNum -= 0.1;
                            imgbox.cropper('zoom', 0.1);
                            return false;
                        },
                        btn3: function(index, layero) {
                            var imgbox = layero.find("#newMiva");
                            zoomNum += 0.1;
                            imgbox.cropper('zoom', -0.1);
                            return false;
                        },
                        btn4: function(index, layero) {
                            $(layero.find('.yulan')).find(layero.find('img')).attr('src', fileBuffer)
                            return false;
                        }
                    })
                })
            };
            // 重置input[type=file];
            files.val('');
        });
    });
    </script>
</body>

</html>